<template>
  <div :class="['section_con2', pageType !== 'sum' ? 'mini_section_con2' : '']" ref="sectionCon">
    <template v-if="tableData.length != 0">
      <div class="down_header" ref="downHeader">
        <p class="title">民主测评签到表（{{ detailsItem.assessmentSecondTitle }}）</p>
        <p class="sub_title1">
          {{ detailsItem.createByOrgName }}单位：{{ detailsItem.startTime }} ~
          {{ detailsItem.endTime }} 召开民主测评会，应到{{ detailsItem.sumPerson }}人次，实到{{
            detailsItem.actuallyPerson
          }}人次。
          <el-button class="btnBorder" size="mini" type="primary" @click="onExport">导出</el-button>
        </p>
      </div>
      <div class="down_body" :class="{ bodyHeight: pageType == 'sum' }">
        <vxe-table
          class="mytable-scrollbar"
          border
          stripe
          :height="height"
          row-id="id"
          size="medium"
          resizable
          :scroll-y="{ enabled: false }"
          :data="tableData"
          :header-cell-class-name="headerStyle"
          :row-class-name="rowClass"
          highlight-hover-row>
          <vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
          <vxe-column field="userName" title="姓名" align="center" min-width="100"></vxe-column>
          <vxe-column field="telephone" title="手机号" align="center" min-width="100"></vxe-column>
          <vxe-column field="signTime" title="签到时间" align="center" min-width="120" sortable></vxe-column>
        </vxe-table>
      </div>
    </template>
    <Empty
      v-else
      style="height: auto"
      :img-style="{
        width: '50%',
        height: '40%',
        marginTop: '-4%',
        objectFit: 'scale-down',
      }">
      <slot>暂无数据</slot>
    </Empty>
  </div>
</template>

<script>
import {
  listAssessmentSignFormVO,
  listAssessmentSignFormVOOrgan,
  downAssessmentSign,
  downAssessmentSignOrg,
} from '@apis/mzEvaluation.js'
export default {
  name: 'EvaluationSignData',
  props: {
    pageType: String,
    searchParams: Object,
    assessmentId: String,
  },
  data() {
    return {
      tableData: [],
      height: 0,
      id: this.$route.query.id || '',
      detailsItem: {},
    }
  },
  watch: {
    searchParams: {
      handler(newVal, oldVal) {
        this.initdata()
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /* 初始化数据 */
    initdata() {
      if (this.pageType !== 'sum') {
        listAssessmentSignFormVO({ assessmentId: this.id }).then(res => {
          const data = res.data
          this.tableData = data.signDetails ? data.signDetails : []
          this.detailsItem = { ...data }
          setTimeout(() => {
            if (this.$refs.downHeader) {
              this.$nextTick(() => {
                this.height = this.$refs.sectionCon.offsetHeight - this.$refs.downHeader.offsetHeight - 30
              })
            }
          }, 100)
        })
      } else {
        listAssessmentSignFormVOOrgan({
          orgId: this.searchParams.id,
          title: this.searchParams.title,
          tenantId: this.searchParams.tenantId,
        }).then(res => {
          const data = res.data
          this.tableData = data.signDetails ? data.signDetails : []
          this.detailsItem = { ...data }
          setTimeout(() => {
            if (this.$refs.downHeader) {
              this.$nextTick(() => {
                this.height = this.$refs.sectionCon.offsetHeight - this.$refs.downHeader.offsetHeight - 30
              })
            }
          }, 100)
        })
      }
    },
    /* 导出 */
    onExport() {
      if (this.pageType === 'sum') {
        const req = `?orgId=${this.searchParams.id}&title=${encodeURIComponent(this.searchParams.title)}&tenantId=${
          this.searchParams.tenantId
        }`
        const link = document.createElement('a')
        link.href = downAssessmentSignOrg(req)
        link.target = 'targetName'
        link.click()
      } else {
        const req = `?assessmentId=${this.id}`
        const link1 = document.createElement('a')
        link1.href = downAssessmentSign(req)
        link1.target = 'targetName'
        link1.click()
      }
    },
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
  },
}
</script>

<style lang="scss" scoped>
.section_con2 {
  height: 100%;
  background-color: #fff;
  font-size: 14px;
  padding: 0 20px;
  &.mini_section_con2 {
    height: calc(100% - 54px);
    padding: 0 25px;
    .down_body {
      height: calc(100% - 200px);
    }
  }
  .down_header {
    text-align: center;
    margin-bottom: 20px;
    .title {
      font-weight: 600;
      font-size: 22px;
      color: #333;
      margin-bottom: 15px;
    }
    .sub_title {
      color: #666;
      font-size: 16px;
      margin-bottom: 10px;
    }
    .sub_title1 {
      color: #666;
      position: relative;
      .el-button {
        position: absolute;
        right: 0;
        top: -5px;
      }
    }
  }
  .down_body {
    height: calc(100% - 160px);
  }
}
/deep/.headerStyle {
  color: #333;
  border-left: 1px solid #eee;

  th,
  div,
  span,
  p {
    font-size: 14px;
  }
}

/deep/.rowClass {
  td,
  div,
  span,
  p {
    font-size: 14px;
  }
}
/deep/.empty .img {
  margin-top: 0;
}
</style>
